<template>
    <div>
        <div ref="sceneDataPie" style="width:100%;height:18.75rem;"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { importScenePieData } from '../api/echartsChatApi'
import { sceneOverviewPieOption } from '../../../../../../utils/js/point'
export default {
    data() {
        return {
            allData: []
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        async getData() {
            const res = await importScenePieData()
            this.allData = res.data.data;
            this.initChart();
        },
        initChart() {
            var totalDataVolume = 0
            var allData = []
            this.allData.forEach(item => {
                allData.push({
                    value: item.total_size,
                    name: item.main_scene
                })
                totalDataVolume += item.total_size;
            });
            totalDataVolume = this.numFormat(totalDataVolume)
            sceneOverviewPieOption.title[0].text = '总数据量';
            sceneOverviewPieOption.title[1].text = totalDataVolume;
            sceneOverviewPieOption.series[0].data = allData; 
            var myChart = echarts.init(this.$refs.sceneDataPie);
            myChart.setOption(sceneOverviewPieOption);
            // echart图表自适应
            window.addEventListener('resize', function() {
                myChart.resize();
            });
        }
    }
}
</script>